<template>
	<view class="page-content">
		<view class="nav-tabbar">
			<scroll-view scroll-x="true" class="scroll-view_H">
				<view class="tabbar-item" :class="{'active':tabbar.length+1 == curr}"
					@click="tabChange(tabbar.length+1)">新区门户</view>
				<block v-if="tabbar.length>0" v-for="(item,index) in tabbar" :key="index">
					<view class="tabbar-item" :class="{'active':index == curr}" @click="tabChange(index)">
						{{ item.dictLabel }}
					</view>
				</block>
			</scroll-view>
		</view>
		<view class="scroll-view-wrap flex-item">
			<view class="scroll-view-inner flex" v-show="specialSelected" style="background: #fff;">
				<scroll-view scroll-y="true" class="scroll-view">
					<view class="swiper">
						<image src="../../static/news/xqdt.png" mode="widthFix" class="banner"></image>
					</view>
					<view class="news-card">
						<image src="../../static/news/header-background.png" mode="widthFix" class="line"></image>
						<view class="title">
							<text>新区视频</text>
						</view>
						<view class="content news-list">
							<view class="list-item flex flex-middle"  v-for="(item,index) in newVideo" :key="index" @click="handleLink(item.url)">
								<view class="date flex flex-column flex-center borders">
									<text>{{item.time.slice(8,10)}}</text>
									<text>{{item.time.slice(0,7)}}</text>
								</view>
								<view class="flex-item">
									<view class="news-title">{{item.title}}</view>
									<view class="news-tip">
										<text class="from ellipsis">来源：{{item.source}}</text>
									</view>
								</view>
							</view>
						</view>
						
					</view>
					<view class="news-card">
						<image src="../../static/news/header-background.png" mode="widthFix" class="line"></image>
						<view class="title">
							<text>新区动态</text>
						</view>
						<view class="content news-list">
							<view class="list-item flex flex-middle" v-for="(item,index) in newDynamic" :key="index" @click="handleLink(item.url)">
								<view class="date flex flex-column flex-center borders">
									<text>{{item.time.slice(8,10)}}</text>
									<text>{{item.time.slice(0,7)}}</text>
								</view>
								<view class="flex-item">
									<view class="news-title">{{item.title}}</view>
									<view class="news-tip">
										<text class="from ellipsis">来源：{{item.source}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="news-card">
						<image src="../../static/news/header-background.png" mode="widthFix" class="line"></image>
						<view class="title">
							<text>通知公告</text>
						</view>
						<view class="content news-list">
							<view class="list-item flex flex-middle" v-for="(item,index) in noticeAnnouncement" :key="index" @click="handleLink(item.url)">
								<view class="date flex flex-column flex-center borders">
									<text>{{item.time.slice(8,10)}}</text>
									<text>{{item.time.slice(0,7)}}</text>
								</view>
								<view class="flex-item">
									<view class="news-title">{{item.title}}</view>
									<view class="news-tip">
										<text class="from ellipsis">来源：{{item.source}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="news-card">
						<image src="../../static/news/header-background.png" mode="widthFix" class="line"></image>
						<view class="title">
							<text>政策解读</text>
						</view>
						<view class="content news-list">
							<view class="list-item flex flex-middle" v-for="(item,index) in policyInterpretation" :key="index" @click="handleLink(item.url)">
								<view class="date flex flex-column flex-center borders">
									<text>{{item.time.slice(8,10)}}</text>
									<text>{{item.time.slice(0,7)}}</text>
								</view>
								<view class="flex-item">
									<view class="news-title">{{item.title}}</view>
									<view class="news-tip">
										<text class="from ellipsis">来源：{{item.source}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="scroll-view-inner flex" v-if="newsData" v-for="(newsItem,index) in newsData" :key="index"
				v-show="curr == index">
				<scroll-view scroll-y="true" class="scroll-view" refresher-enabled :refresher-triggered="isRefresh"
					@refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore"
					@refresherabort="refresherabort">
					<view class="">
						<block v-if="newsItem.dataList.length>0">
							<swiper v-if="newsItem.dataList" class="swiper" circular :indicator-dots="true"
								indicator-color="rgba(204,204,204,1)" indicator-active-color="#ffffff" autoplay
								:current="newsItem.current">
								<swiper-item v-for="item in newsItem.dataList" @click="goTo(item.id)">
									<image :src="item.fileUrl" mode="widthFix" class="banner"></image>
									<view class="banner-title">{{ item.title }}</view>
								</swiper-item>
							</swiper>
						</block>
						<view class="news-list" v-if="newsItem.newsList">
							<view class="list-item b-b" v-for="item in newsItem.newsList" @click="goTo(item.id)">
								<view class="flex flex-middle">
									<view class="flex-item">
										<view class="news-title">{{ item.title }}</view>
									</view>
									<image v-if="item.fileUrl" :src="item.fileUrl" mode="widthFix" class="news-img">
									</image>
								</view>
								<view class="news-tip">
									<text v-if="item.newsource" class="from ellipsis">{{ item.newsource }}</text>
									<text v-if="item.publishdate">{{ item.publishdate }}</text>
									<text>{{ item.viewTotal || 0 }}人浏览</text>
								</view>
							</view>
						</view>
						<view class="no-data" v-if="newsItem.noData && newsItem.newsList.length == 0">
							<view class="ux-tips">暂无记录</view>
						</view>
						<block v-else>
							<uni-load-more :status="newsItem.loadStatus"></uni-load-more>
						</block>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import uTitle from '@/components/title/titles.vue'
	let _self
	export default {
		components: {
			uniLoadMore,
			uTitle
		},
		data() {
			return {
				tabbar: [],
				curr: 4,
				pageSize: 8,
				newsData: '',
				isRefresh: false,
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				current: 0,
				specialSelected: true,
				aaaaa: '',
				// 新区视频
				newVideo:[],
				// 新区动态
				newDynamic:[],
				// 通知公告
				noticeAnnouncement:[],
				// 政策解读
				policyInterpretation:[],
			}
		},
		onLoad() {
			this.getDictByType()
			this.getNewsTouTiao()
			this.getNewAreaVideo()
		},
		onReachBottom() {
			if (this.specialSelected) return
			let newsItem = this.newsData[this.curr]
			if (newsItem.pageIndex * this.pageSize >= newsItem.pageTotal) {
				newsItem.noData = true;
				newsItem.loadStatus = 'noMore';
				return;
			}
			newsItem.pageIndex++;
			newsItem.loadStatus = 'loading';
			this.getNewsList()
		},
		methods: {
			// 点击具体某一条数据进行跳转
			handleLink(url){
				var time1 = new Date();
				var time = time1.getTime();
				uni.navigateTo({url:`../newDetail/newDetail?url=${url}&time=${time}`})
				// window.location.href = url;
			},
			// 获取新闻动态新区门户新区视频、新区动态、通知公告、政策解读
			getNewAreaVideo(){
				_self = this
				_self.$$.request({
					url: _self.config.getNewAreaVideo,
					data: {},
					method: "GET"
				}, false, true).then((res) => {
					console.log("res",res)
					// 新区视频
					_self.newVideo = res.data[2].xqsp;
					// 新区动态、
					_self.newDynamic = res.data[1].xqdt;
					// 通知公告
					_self.noticeAnnouncement = res.data[3].tzgg;
					// 政策解读
					_self.policyInterpretation = res.data[0].zcjd;
				}).catch((Error) => {
					console.log(Error.msg)
				}).finally(() => {
					console.log("complete")
				})
			},
			tabChange(v) {
				if (v == this.curr) return
				this.curr = v
				if (v > this.tabbar.length) {
					this.specialSelected = true
				} else {
					this.specialSelected = false
					if (this.$$.isEmptyObj(this.newsData[v].dataList)) {
						this.getNewsBanner()
					}
					if (this.$$.isEmptyObj(this.newsData[v].newsList)) {
						this.getNewsList()
					}
				}
			},
			getDictByType() {
				_self = this
				_self.$$.request({
					url: _self.config.getDictByType,
					data: {},
					method: "GET"
				}, false, true).then((res) => {
					console.log("请求了类型")
					if (res.code == 2000) {
						_self.tabbar = _self.tabbar.concat(res.data.rows)
						_self.getData()
					}
					if (res.code == 2001) {
						_self.tabbar = []
					}
				}).catch((Error) => {
					console.log(Error.msg)
				}).finally(() => {
					console.log("complete")
				})
			},
			
			getData() {
				let newsData = []
				this.tabbar.forEach((item, index) => {
					newsData.push({
						current: 0,
						pageIndex: 1,
						pageTotal: 0,
						loadStatus: "loading",
						noData: false,
						refresh: true,
						dataList: [],
						newsList: []
					})
				})
				this.newsData = newsData
				this.getNewsBanner()
				this.getNewsList()
			},
			getNewsBanner() {
				let curr = this.curr
				let columnType = this.tabbar[curr].dictValue
				this.$$.request({
					url: this.config.getBanner,
					data: {
						columnType: columnType
					},
					method: "POST"
				}, false, true).then((res) => {
					let list = []
					if (!this.$$.isEmptyObj(res.data.rows)) {
						list = res.data.rows
					}
					this.newsData[curr].dataList = list

				}).catch((Error) => {
					console.log(Error.msg)
				}).finally(() => {})
			},
			getNewsList() {
				let _this = this
				let curr = this.curr
				let newsItem = this.newsData[curr]
				var data = {
					page: newsItem.pageIndex,
					pageSize: _this.pageSize,
					columnType: _this.tabbar[curr].dictValue
				}
				this.$$.request({
					url: this.config.getNewsList,
					data: data,
					method: "POST"
				}, false, true).then((res) => {
					if (_self.isRefresh) {
						newsItem.newsList = []
						_self.isRefresh = false
					}
					if (res.code == 2000) {
						let list = res.data.rows
						newsItem.pageTotal = res.data.total
						if (list.length > 0) {
							newsItem.newsList = newsItem.newsList.concat(list)
							if (list.length < this.pageSize) {
								newsItem.loadStatus = 'noMore'
							} else if (newsItem.pageIndex * this.pageSize >= newsItem.pageTotal) {
								newsItem.loadStatus = 'noMore'
							} else {
								newsItem.loadStatus = 'more'
							}
						} else {
							newsItem.noData = true;
							newsItem.loadStatus = 'noMore';
						}

						_self.newsData[curr] = newsItem

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: false,
							duration: 1500
						});
					}

				}).catch((Error) => {
					console.log(Error.msg)
				}).finally(() => {
					_self.newsData[curr].refresh = true
					_self.newsData[curr].refresh = false
					console.log("查询新闻列表的刷新", _self.newsData[curr].refresh)
				})
			},
			goTo(id) {
				uni.navigateTo({
					url: '../newsInfo/newsInfo?id=' + id,
				});
			},
			refresherrefresh() {
				if (this.isRefresh) return
				console.log("自定义下拉刷新被触发");
				let curr = this.curr
				let newsItem = this.newsData[this.curr]


				this.isRefresh = true
				this.newsData[this.curr].pageIndex = 1

				this.getNewsBanner()
				this.getNewsList()
			},
			refresherrestore() {
				console.log("自定义下拉刷新被复位");
				let curr = this.curr

				// this.isRefresh = false
				// this.newsData[curr].refresh = false;
			},
			refresherabort() {
				console.log("自定义下拉刷新被中止	");
				let curr = this.curr

				// this.isRefresh = false
				// this.newsData[curr].refresh = false;
			},

			getNewsTouTiao() {
				// uni.request({
				// 	url: 'http://www.hlgena.gov.cn/xwdt/xwtt/index_390.json',
				// 	method: 'GET',
				// 	data: {},
				// 	success: res => {
				// 		console.log(res)
				// 		this.aaaaa = res
				// 	},
				// 	fail: (Error) => {
				// 		alert(Error.message)
				// 	},
				// 	complete: () => {}
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F5F5F5;
		width: 100%;
		min-height: 100%;
		display: flex;
		overflow: hidden;
	}

	.page-content {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
	}

	.nav-tabbar {
		// position: fixed;
		padding: 80upx 20upx 0;
		width: 750upx;
		// height: 120upx;
		background: #F9F9F9;
		box-shadow: 0px 1px 0px 0px #E5E5E5;

		.tabbar-item {
			position: relative;
			display: inline-block;
			padding: 20upx 30upx;
			font-size: 30upx;
			font-weight: bold;
			color: $uni-text-color;

			&.active {
				font-size: 36upx;
				color: $uni-color-primary;

				&::after {
					background: $uni-color-primary;
				}
			}

			&::after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				width: 70upx;
				height: 6upx;
				transform: translateX(-50%);
			}
		}
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-wrap {
		position: relative;
		height: calc(100vh - 180upx);
	}

	.scroll-view-inner {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.scroll-view {
		flex: 1;
		flex-direction: column;
	}

	uni-swiper {
		width: 750upx;
		height: 390upx;

		/deep/ .uni-swiper-dots-horizontal {
			left: 10%;
		}

		/deep/ .uni-swiper-dot {
			width: 8upx;
			height: 8upx;
			border-radius: 8upx;
		}

		/deep/ .uni-swiper-dot-active {
			width: 20upx;
			height: 8upx;
		}
	}

	.banner {
		width: 750upx;
		height: 390upx;
	}

	.banner-title {
		position: absolute;
		bottom: 0;
		width: 750upx;
		height: 152upx;
		padding: 65upx 35upx 50upx;
		font-size: 32upx;
		font-weight: bold;
		color: #FFFFFF;
		background: rgba(0, 0, 0, .09);
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		box-sizing: border-box;
	}

	.news-list {
		// padding: 0 30upx;
		background-color: $uni-bg-color;

		.list-item {
			padding: 30upx;

			.flex {
				margin-bottom: 20upx;
			}



			.news-title {
				font-size: 32upx;
				// font-weight: bold;
				color: $uni-text-color;
				line-height: 52upx;
			}

			.news-img {
				margin-left: 40upx;
				width: 224upx;
				height: 160upx;
			}

			.news-tip {
				.from {
					max-width: 280upx;
				}

				uni-text {
					display: inline-block;
					margin-right: 40upx;
					font-size: 24upx;
					color: $uni-text-color-grey;
					vertical-align: middle;
				}
			}
		}
	}

	.news-card {

		margin-top: 30upx;
		padding: 0 30upx;

		.line {
			width: 690upx;
			height: 20upx;
		}

		.title {
			padding: 20upx 0;
			text-align: center;

			text {
				position: relative;
				display: inline-block;
				width: 300upx;
				line-height: 90upx;
				color: #fff;
				background: #0D5599;
				border-radius: 8upx;

				&::before,
				&::after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 10upx;
					height: 4upx;
					transform: translateX(-50%);
				}

				&::before {
					width: 20upx;
					background: #F8B551;
					z-index: 1;
				}

				&::after {
					width: 80upx;
					background: #00A0E9;
				}
			}
		}

		.news-list {
			.list-item {
				margin: 20upx 0;
				padding: 0;

				.news-title {
					font-weight: normal;
					line-height: 48upx;
				}
			}

			.date {
				width: 128upx;
				height: 128upx;
				margin-top: 25upx;
				margin-right: 40upx;
				text-align: center;
				border-radius: 8upx;
				overflow: hidden;

				text {
					&:first-child {
						font-size: 48upx;
						font-weight: bold;
						color: #00A0E9;
					}

					&:last-child {
						font-size: 24upx;
						color: #999999;
					}
				}

			}
		}
	}
</style>
